<template>
  <el-container class="icesoft-layout">
    <el-aside :width="asideWidth" class="icesoft-aside transition-ease-in-out">
      <Logo/>
      <Menu />
    </el-aside>
    <el-container class="d-flex flex-column">
      <el-header class="icesoft-header fill-width px-2">
        <div class="d-flex fill-width fill-height align-center justify-space-between">
          <el-space>
              <el-button class="ml-2" link @click="settingStore.changeCollapse">
                <template #icon>
                  <i-icon :icon="!collapse?'mdi-menu-open':'mdi-menu'" size="22px" />
                </template>
              </el-button>
          </el-space>

          <el-space size="large">
            <el-tooltip :effect="isDark?'light':'dark'" content="主题切换">
              <el-button link @click="changeDark(!isDark)">
                <template #icon>
                  <i-icon :icon="isDark?'mdi-weather-sunny-off':'mdi-weather-sunny'" size="22px" />
                </template>
              </el-button>
            </el-tooltip>

            <el-tooltip :effect="isDark?'light':'dark'" content="退出登录">
              <el-button link @click="userStore.logout()">
                <template #icon>
                  <i-icon icon="mdi-logout" size="20px" />
                </template>
              </el-button>
            </el-tooltip>

          </el-space>

        </div>
      </el-header>
      <Tag />
      <el-main class="overflow-x-hidden fill-width icesoft-content pa-0">
        <router-view v-slot="{ Component }">
          <i-xyz-transition :left="'3'" appear mode="out-in">
            <component :is="Component" v-if="Component" />
          </i-xyz-transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import Menu from "@/layouts/Menu.vue";
import { useDark } from "@vueuse/core";
import IXyzTransition from "~/icesoft/components/transitions/IXyzTransition.vue";
import IIcon from "~/icesoft/components/icon/IIcon.vue";
import { useSettingStore } from "~/store/modulers/setting";
import { storeToRefs } from "pinia";
import { useUserStore } from "~/store/modulers/user";
import { useRoute } from "vue-router";
import { computed } from "vue";
import Tag from "~/layouts/Tag.vue";
import Logo from "~/layouts/Logo.vue";

const isDark = useDark();
const settingStore = useSettingStore();
const { collapse, asideWidth } = storeToRefs(settingStore);
const userStore = useUserStore();

const route = useRoute();
const key = computed(() => {
  return route.path + Math.random();
});


function changeDark(dark: boolean) {
  isDark.value = dark;
}
</script>

<style lang="scss" scoped>
.icesoft-layout {
  height: 100vh;

  .icesoft-aside {
    overflow-x: hidden;
    background-color: #030303;
    border-right: solid 1px var(--el-menu-border-color);
  }

  .icesoft-header {
    border-bottom: solid 1px var(--el-menu-border-color);
  }

  .icesoft-content {
    position: relative;
  }
}

html.dark {
  .icesoft-aside {
    background-color: var(--el-bg-color-page);
    border-right: solid 1px var(--el-menu-border-color);
  }
}
</style>
